<template>
  <div class="terminal-overdue-container">
    <!-- 顶部筛选卡片 -->
    <t-card class="filter-card">
      <div class="filter-tabs">
        <t-tabs :value="activeTab" @change="onTabChange">
          <t-tab-panel value="all" label="全部" />
          <t-tab-panel value="overdue" label="已超期" />
        </t-tabs>
        <div class="search-area">
          <t-input placeholder="请输入你需要搜索的内容" clearable class="search-input">
            <template #suffix>
              <t-icon name="search" size="20px" />
            </template>
          </t-input>
        </div>
      </div>
    </t-card>

    <!-- 表格卡片 -->
    <t-card class="table-card">
      <div class="terminal-overdue">
        <!-- 订单表格 -->
        <t-table row-key="id" :data="orderList" :columns="columns" :hover="true" :pagination="pagination"
          @page-change="onPageChange" :row-className="tableRowClass">
          <template #checkboxCol="{ row }">
            <t-checkbox v-model="row.checked" />
          </template>

          <template #cardNo="{ row }">
            <span>{{ row.cardNo }}</span>
          </template>

          <template #overdueTime="{ row }">
            <span>{{ row.overdueTime }}</span>
          </template>

          <template #overdueAmount="{ row }">
            <span>{{ row.overdueAmount }}</span>
          </template>

          <template #status="{ row }">
            <t-tag :theme="getStatusTheme(row.status)" variant="light">
              {{ row.status }}
            </t-tag>
          </template>

          <template #oilNo="{ row }">
            <span>{{ row.oilNo }}</span>
          </template>

          <template #operation="{ row }">
            <t-button theme="primary" variant="text" @click="goToOrderDetail(row)">详情</t-button>
          </template>
        </t-table>
      </div>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { MessagePlugin, TabValue } from 'tdesign-vue-next';
import type { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';

interface OrderItem extends TableRowData {
  id: string;
  checked: boolean;
  cardNo: string;
  overdueTime: string;
  overdueAmount: string;
  status: string;
  oilNo: string;
}

const router = useRouter();

// 标签页
const activeTab = ref<TabValue>('all');

// 表格列配置
const columns = ref<PrimaryTableCol<OrderItem>[]>([
  {
    colKey: 'row-select',
    type: 'multiple',
    width: 64,
    fixed: 'left',
  },
  {
    align: 'left',
    width: 150,
    ellipsis: true,
    colKey: 'cardNo',
    title: '卡号',
  },
  {
    align: 'left',
    width: 150,
    ellipsis: true,
    colKey: 'overdueTime',
    title: '过期时间',
  },
  {
    align: 'left',
    width: 150,
    ellipsis: true,
    colKey: 'overdueAmount',
    title: '超期数量',
  },
  {
    align: 'left',
    width: 150,
    ellipsis: true,
    colKey: 'status',
    title: '审核状态',
  },
  {
    align: 'left',
    width: 150,
    ellipsis: true,
    colKey: 'oilNo',
    title: '油号',
  },
  { colKey: 'operation', title: '操作', width: 120 }
]);

// 订单数据
const orderList = ref<OrderItem[]>([]);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 101,
  pageSizeOptions: [5, 10, 20, 50],
  showJumper: true,
  showPageSize: true,
  onChange(pageInfo: { current: number; pageSize: number }) {
    pagination.current = pageInfo.current;
    pagination.pageSize = pageInfo.pageSize;
    fetchOrderList();
  },
});

// 标签页切换
const onTabChange = (value: TabValue) => {
  activeTab.value = value;
  fetchOrderList();
};

// 获取超期订单列表数据
const fetchOrderList = () => {
  // 模拟订单数据
  const mockData: OrderItem[] = [];

  // 根据选中的标签页筛选数据
  for (let i = 0; i < pagination.pageSize; i++) {
    // 如果是已超期标签，只展示超期状态的数据
    if (activeTab.value === 'overdue' && i < 2) {
      continue; // 跳过前两条记录，模拟非超期数据
    }

    const statuses = ['解封申请中', '已解封', '已超期', '已超期', '已超期', '已超期', '已超期', '已超期', '已超期', '已超期'];
    const status = statuses[i % statuses.length];

    mockData.push({
      id: `${(pagination.current - 1) * pagination.pageSize + i + 1}`,
      checked: false,
      cardNo: '34531877441314',
      overdueTime: '2025/03/14 13:23',
      overdueAmount: '19000.000KG',
      status,
      oilNo: '92号车用汽油',
    });
  }
  orderList.value = mockData;
};

// 根据状态获取标签主题
const getStatusTheme = (status: string) => {
  switch (status) {
    case '解封申请中':
      return 'warning';
    case '已解封':
      return 'success';
    case '已超期':
      return 'danger';
    default:
      return 'default';
  }
};

// 页面变化
const onPageChange = (pageInfo: { current: number; pageSize?: number }) => {
  pagination.current = pageInfo.current;
  if (pageInfo.pageSize) {
    pagination.pageSize = pageInfo.pageSize;
  }
  fetchOrderList();
};

// 跳转到订单详情页
const goToOrderDetail = (row: OrderItem) => {
  router.push({
    path: `/terminal/overdue/detail/${row.id}`,
    query: {
      cardNo: row.cardNo,
      status: row.status,
      oilNo: row.oilNo,
      overdueAmount: row.overdueAmount,
      overdueTime: row.overdueTime
    }
  });
};

// 设置行样式类
const tableRowClass = ({ row }: { row: OrderItem }): string => {
  if (row.status === '已超期') {
    return 'overdue-row';
  }
  return '';
};

onMounted(() => {
  fetchOrderList();
});
</script>

<style lang="less" scoped>
.terminal-overdue-container {
  width: 100%;

  .filter-card {
    margin-bottom: 16px;

    .filter-tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-area {
        .search-input {
          width: 300px;
        }
      }
    }
  }

  .table-card {
    .terminal-overdue {
      width: 100%;
    }
  }
}

// 超期样式
.overdue-row {
  background-color: rgba(255, 77, 79, 0.05);
}
</style>